<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The HTML Presentation Framework</title>
        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
        <meta name="author" content="Hakim El Hattab">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style>
            html,body{
                width: 100%;
                height: 100%;
                background:#0A0F23;
            }
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
	<body>
    <div id="main" style="width: 100%;height:100%;"></div>
    <script src="../../components/echarts-4.0.4.min.js"></script>
        <script>
            var pieChart = echarts.init(document.getElementById('main'));
			var pieTitle = '2017年西安市技术合同技术领域成交构成';
            var option = {
            	title: {
                    text:pieTitle,
                    left: 'center',
                    top: "0%",
                    textStyle: {
                        color: '#fff',
                        fontSize: 22
                    }
                },
                color:['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293','#67c47b', "#37A2DA", "#32C5E9", "#67E0E3", "#9FE6B8","#34638b","#1b8a83","#36bdb4"],
			    angleAxis: {
			        type: 'category',
			        data: ['电子信息技术','航空航天技术', '先进制造技术','生物、医药和医疗器械技术','新材料及其应用',' 新能源与高效节能', '环境保护与资源综合利用技术','核应用技术', '农业技术','现代交通', '城市建设与社会发展'],
			        z: 10,
				    axisLabel:{
                    	textStyle: {
	                        color: '#fff',
	                        fontSize: 16
	                    },
	                    margin: 40
			        },
			        axisTick:{
			        	show:false
			        },
			        axisLine:{
			        	show:false
			        }
			    },
			    radiusAxis: {
		        	show:false
			    },
			    polar: {
			        radius:['60']
			    },
			    series: [{
			        type: 'bar',
			        data: [318, 50, 73,8,20, 185,38,5,49,60,63],
			        coordinateSystem: 'polar',
			        name: '技术成交额',
			        label: {
			            position:'inside',
			            formatter:'{c}亿元'
			        },
			        stack: 'a'
			    },{
			        name:'技术合同数',
			        type:'pie',
			        radius: ['40%', '50%'],
			        label: {
			        	show:false,
			            position:'inside',
			            formatter:'{c}份'
			        },
			        data:[
			            {value:10200, name:'电子信息技术'},
			            {value:1100, name:'航空航天技术'},
			            {value:3100, name:'先进制造技术'},
			            {value:400, name:'生物、医药和医疗器械技术'},
			            {value:700, name:'新材料及其应用'},
			            {value:2800, name:'新能源与高效节能'},
			            {value:780, name:'环境保护与资源综合利用技术'},
			            {value:160, name:'核应用技术'},
			            {value:150, name:'农业技术'},
			            {value:3900, name:'现代交通'},
			            {value:5900, name:'城市建设与社会发展'}
			        ]
			    }],
			    legend: {
			        show: true,
			        data: ['技术成交额', '技术合同数'],
			        left: '10%',
                    top: '25%',
                    orient: 'vertical',
                    itemGap: 12, //图例每项之间的间隔
                    itemWidth: 10,
                    itemHeight: 10,
                    icon: 'rect',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    }
			    }
			};
            pieChart.setOption(option);
        </script>
    </body>
</html>
